<template>
	<view class="sheet-add">
		<view class="pt-3 pl-3 pr-3 sheet-add-wrap">
			<view class="pl-2 mb-1 main-title">服务情况</view>
			<view class="pb-1 mb-3 sheet-add-panel">
				<u--textarea v-model="RepairInfo.RepairDescr" placeholder="请输入服务记录" height="100" maxlength="300" border="none"
					confirmType="done"></u--textarea>
			</view>
			<view class="pl-2 mb-1 main-title">费用明细-收入</view>
			<view class="pl-3 pr-3 pb-1 mb-3 sheet-add-panel">
				<u--form class="sheet-add-form" labelWidth="94" :borderBottom="false" :model="RepairInfo"
					>
					<u-form-item v-show="RepairInfo.ShowRevenue01" :label="RepairInfo.Revenue01Name" prop="Revenue01" :borderBottom="false">
						<u--input type="digit" v-model="RepairInfo.Revenue01" border="none" clearable></u--input>
					</u-form-item>
					<u-form-item v-show="RepairInfo.ShowRevenue02" :label="RepairInfo.Revenue02Name" prop="Revenue02" :borderBottom="false">
						<u--input type="digit" v-model="RepairInfo.Revenue02" border="none" clearable></u--input>
					</u-form-item>
					<u-form-item v-show="RepairInfo.ShowRevenue03" :label="RepairInfo.Revenue03Name" prop="Revenue03" :borderBottom="false">
						<u--input type="digit" v-model="RepairInfo.Revenue03" border="none" clearable></u--input>
					</u-form-item>
					<u-form-item v-show="RepairInfo.ShowRevenue04" :label="RepairInfo.Revenue04Name" prop="Revenue04" :borderBottom="false">
						<u--input type="digit" v-model="RepairInfo.Revenue04" border="none" clearable></u--input>
					</u-form-item>
					<u-form-item v-show="RepairInfo.ShowRevenue05" :label="RepairInfo.Revenue05Name" prop="Revenue05" :borderBottom="false">
						<u--input type="digit" v-model="RepairInfo.Revenue05" border="none" clearable></u--input>
					</u-form-item>
					<u-form-item label="合计" prop="TotalRevenue" :borderBottom="false">
						<view> {{sumTotalRevenue()}} </view>
					</u-form-item>
				</u--form>
			</view>
			<view class="pl-2 mb-1 main-title manager-color">费用明细-支出</view>
			<view class="pl-3 pr-3 pb-1 mb-3 sheet-add-panel">
				<u--form class="sheet-add-form" labelWidth="94" :borderBottom="false" :model="RepairInfo">
					<u-form-item v-show="RepairInfo.ShowExpense01" :label="RepairInfo.Expense01Name" prop="Expense01" :borderBottom="false">
						<u--input type="digit" v-model="RepairInfo.Expense01" border="none" clearable></u--input>
					</u-form-item>
					<u-form-item v-show="RepairInfo.ShowExpense02" :label="RepairInfo.Expense02Name" prop="Expense02" :borderBottom="false">
						<u--input type="digit" v-model="RepairInfo.Expense02" border="none" clearable></u--input>
					</u-form-item>
					<u-form-item v-show="RepairInfo.ShowExpense03" :label="RepairInfo.Expense03Name" prop="Expense03" :borderBottom="false">
						<u--input type="digit" v-model="RepairInfo.Expense03" border="none" clearable></u--input>
					</u-form-item>
					<u-form-item v-show="RepairInfo.ShowExpense04" :label="RepairInfo.Expense04Name" prop="Expense04" :borderBottom="false">
						<u--input type="digit" v-model="RepairInfo.Expense04" border="none" clearable></u--input>
					</u-form-item>
					<u-form-item v-show="RepairInfo.ShowExpense05" :label="RepairInfo.Expense05Name" prop="Expense05" :borderBottom="false">
						<u--input type="digit" v-model="RepairInfo.Expense05" border="none" clearable></u--input>
					</u-form-item>
					<u-form-item label="合计" prop="TotalExpense" :borderBottom="false">
						<view> {{sumTotalExpense()}} </view>
					</u-form-item>
				</u--form>
			</view>
			<view class="pl-3 pr-3 pb-1 mb-3 sheet-add-panel">
				<u--form class="sheet-add-form" labelWidth="70" :borderBottom="false">
					<u-form-item label="类型" prop="SalePrice" :borderBottom="false">
						<u-radio-group v-model="RepairInfo.CustType" placement="row" @change="handleGroupChange">
							<u-radio v-for="(item, index) in typeList" :key="index" :label="item.name" :name="item.custType">
							</u-radio>
						</u-radio-group>
					</u-form-item>
				</u--form>
			</view>
			<view class="pt-2 pl-3 pr-3 pb-1 mb-3 sheet-add-panel">
				<view class="flex justify-between mb-3">
					<view class="title">图片上传</view>
					<view class="label">({{Imgs.length}}/{{CallPhotosMaxQty}})</view>
				</view>
				<u-upload :fileList="imageList" @afterRead="afterRead" @delete="deletePic" name="file" multiple
					:maxCount="CallPhotosMaxQty"></u-upload> 
			</view>
		</view>
		<view class="fixed-height"></view>
		<view class="fixed-btn">
			<view class="mr-3 f-1">
				<u-button @click="handleRepairDoneSave" :plain="true" color="#007aff" shape="circle" text="暂存"></u-button>
			</view>
			<view class="ml-3 f-1">
				<u-button @click="handleRepairDone" color="#007aff" shape="circle" text="完工上报"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		uploadFile
	} from "@/apis/common.js";
	import {
		repairDoneInit,
		repairDone,
		repairDoneSave
	} from "@/apis/workOrder.js";
	export default {
		data() {
			return {
				typeList: [{
					name: '公司',
					custType: '2',
				}, {
					name: '个人',
					custType: '1',
				}],
				Imgs: [],
				imageList: [],
				RepairInfo: {},
				CallPhotosMaxQty: 6,
				ShowLLCK: false,
				ShowWLHS: false,
				Latitude: '22',
				Longitude: '11',
			};
		},
		onLoad(option) {
			if (option.id) {
				this.currId = option.id
				this.fetchData()
				console.log('option', option)
			} else {
				this.$navigateBack(this.$router, 1)
			}
			const _this = this
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					_this.Latitude = res.latitude
					_this.Longitude = res.longitude
				}
			});
		},
		methods: {
			sumTotalRevenue(){
				const t = this.parseFloatOr0(this.RepairInfo.Revenue01) + this.parseFloatOr0(this.RepairInfo.Revenue02) + this.parseFloatOr0(this.RepairInfo.Revenue03) + this.parseFloatOr0(this.RepairInfo.Revenue04) + this.parseFloatOr0(this.RepairInfo.Revenue05)
				return t.toFixed(2)
			},
			sumTotalExpense(){
				const t = this.parseFloatOr0(this.RepairInfo.Expense01) + this.parseFloatOr0(this.RepairInfo.Expense02) + this.parseFloatOr0(this.RepairInfo.Expense03) + this.parseFloatOr0(this.RepairInfo.Expense04) + this.parseFloatOr0(this.RepairInfo.Expense05)
				return t.toFixed(2)
			},
			parseFloatOr0(s){
				return parseFloat(s) || 0
			},
			async fetchData() {
				const res = await repairDoneInit({
					RepairId: this.currId
				})
				console.log('repairDoneInit', res)
				if (res.MsgCode != 0) return
				const rInfo = res.data.RepairInfo
				this.RepairInfo = rInfo
				this.CallPhotosMaxQty = res.data.CallPhotosMaxQty
				this.ShowLLCK = res.data.ShowLLCK
				this.ShowWLHS = res.data.ShowWLHS
				this.Imgs = res.data.RepairInfo.CallPhotos == '' ? [] : res.data.RepairInfo.CallPhotos.split(',')
				this.imageList = this.Imgs.map(item =>{
					return {
						url: 'http://img.help10000.com' + item
					}
				})
			},
			async handleRepairDoneSave(){
				const data = this.formatData()
				console.log('handleRepairDoneSave', data)
				
				const res = await repairDoneSave(data)
				console.log('handleRepairDoneSave res', res)
				
				if (res.MsgCode != 0) return
				uni.showToast({
					title: '操作成功',
					icon: "success",
					mask: true,
					position: "center",
				});
				setTimeout(() => {
					this.$navigateBack(this.$router, 1)
				}, 1500)
			},
			async handleRepairDone(){
				const data = this.formatData()
				const res = await repairDone(data)
				if (res.MsgCode != 0) return
				uni.showToast({
					title: '操作成功',
					icon: "success",
					mask: true,
					position: "center",
				});
				setTimeout(() => {
					this.$navigateBack(this.$router, 1)
				}, 1500)
			},
			formatData(){
				const rInfo = this.RepairInfo
				rInfo.RepairId = this.currId
				rInfo.CallPhotos = this.Imgs.join(',')
				rInfo.TotalExpense = this.sumTotalExpense()
				rInfo.TotalRevenue = this.sumTotalRevenue()
				rInfo.Latitude = this.Latitude
				rInfo.Longitude = this.Longitude
				return rInfo
			},
			handleGroupChange(e){
				console.log('groupChange', e,this.RepairInfo.CustType)
				
			},
			async afterRead(event) {
				console.log('afterRead', event, this.imageList)
				this.imageList = [...this.imageList, ...event.file]
				event.file.map(async item => {
					await this.uploadImg(item.url)
				})
			},
			async uploadImg(imgUrl) {
				const accountInfo = uni.getStorageSync('accountInfo') || {}
				const data = {
					name: 'file',
					formData: {},
					fileUrl: imgUrl
				}
				const res = await uploadFile({
					CmpyCode: accountInfo.currCmpy ? accountInfo.currCmpy.CmpyCode : ''
				}, data)
				console.log('uploadImg', res)
				if (res.MsgCode != 0) return
				this.Imgs.push(res.FileName)
			},
			deletePic(event) {
				this.imageList.splice(event.index, 1)
				this.Imgs.splice(event.index, 1)
				console.log('deletePic', this.imageList, this.Imgs)
			},
			handleBack() {
				this.$navigateBack(this.$router, 1)
			}
		}
	}
</script>

<style lang="scss">
	.sheet-add {
		.sheet-add-wrap {
			font-size: 28rpx;

			.main-title {
				font-weight: bold;
				color: $s-text-color-brand;
				font-size: 28rpx;
			}

			.manager-color {
				color: $s-manager-color
			}

			.title {
				font-weight: bold;
				font-size: 28rpx;
			}

			::v-deep .u-radio-group--row {
				justify-content: space-evenly;
			}

			.sheet-add-panel {
				background-color: #fff;
				border-radius: $s-border-radius;
				box-shadow: $s-bg-shadow;

				.sheet-add-form {}

				.img {
					width: 140rpx;
					height: 140rpx;

				}

				::v-deep .u-form-item__body__left__content__label {
					color: #7E7E7E;
				}
			}
		}

		.fixed-height {
			height: 130rpx;
			width: 100%;
		}

		.fixed-btn {
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: center;
			width: calc(100% - 60rpx);
			padding: 20rpx 30rpx;
			background-color: #fff;

			::v-deep .u-button {
				margin: 0;
			}
		}
	}
</style>
